<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>熙心健康体检系统看板</title>
 <!-- 引入 ECharts CDN -->
 <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
 <style>
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "微软雅黑", sans-serif;
   }
   body {
     background: #f2f2f2;
     display: flex; /* 侧边栏 + 主内容并排 */
   }
   /* 侧边栏样式 */
   .sidebar {
     width: 220px;
     background: #2f3b4b;
     color: #fff;
     padding: 20px 0;
   }
   .sidebar .title {
     font-size: 18px;
     text-align: center;
     margin-bottom: 30px;
     font-weight: bold;
   }
   .sidebar ul {
     list-style: none;
   }
   .sidebar li {
     padding: 12px 20px;
     cursor: pointer;
     transition: all 0.3s;
   }
   .sidebar li:hover {
     background: #1f2d3d;
   }
   /* 主内容区域 */
   .main {
     flex: 1; /* 占满剩余宽度 */
     padding: 20px;
     display: flex;
     flex-direction: column;
   }
   
   /* 顶部管理员信息栏 */
   .admin-header {
     background: #fff;
     padding: 10px 20px;
     border-radius: 6px;
     margin-bottom: 20px;
     box-shadow: 0 0 8px rgba(0,0,0,0.1);
     display: flex;
     justify-content: flex-end;
   }
   .admin-info {
     font-size: 14px;
   }
   .admin-info a {
     color: #f00;
     text-decoration: none;
     margin-left: 5px;
     cursor: pointer;
   }
   .admin-info a:hover {
     text-decoration: underline;
   }
   
   /* 顶部统计栏（103、203 等） */
   .top-stats {
     display: flex;
     gap: 20px;
     margin-bottom: 20px;
   }
   .stat-card {
     flex: 1;
     background: #fff;
     border-radius: 6px;
     padding: 15px;
     box-shadow: 0 0 8px rgba(0,0,0,0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
   }
   .stat-card .num {
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 6px;
   }
   /* 中间内容：左侧（饼图+折线） + 右侧（柱状+雷达） */
   .middle-content {
     display: flex;
     gap: 20px;
     margin-bottom: 20px;
   }
   /* 左侧模块（饼图 + 折线） */
   .left-panel {
     flex: 2;
     display: flex;
     flex-direction: column;
     gap: 20px;
   }
   .chart-box {
     background: #fff;
     border-radius: 6px;
     padding: 20px;
     box-shadow: 0 0 8px rgba(0,0,0,0.1);
     height: 300px; /* 图表容器高度 */
   }
   /* 右侧模块（柱状 + 雷达） */
   .right-panel {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
   }
   /* 图表容器通用样式 */
   .echarts-dom {
     width: 100%;
     height: 100%;
   }
 </style>
</head>
<body>
 <!-- 侧边栏 -->
 <div class="sidebar">
   <div class="title">熙心健康体检系统</div>
   <ul>
     <li onclick="goToPage('shouye.html')">首页</li>
     <li onclick="goToPage('tijian.html')">体检预约</li>
     <li onclick="goToPage('yuyue.html')">预约列表</li>
     <li onclick="goToPage('chaxun.html')">体检客户查询</li>
   </ul>
 </div>
 <!-- 主内容 -->
 <div class="main">
   <!-- 顶部管理员信息栏 -->
   <div class="admin-header">
     <div class="admin-info">系统管理员：admin | <a id="logoutLink">退出登录</a ></div>
   </div>
   
   <!-- 顶部统计栏 -->
   <div class="top-stats">
     <div class="stat-card">
       <div class="num">103</div>
       <div>用户数</div>
     </div>
     <div class="stat-card">
       <div class="num">203</div>
       <div>订单</div>
     </div>
     <div class="stat-card">
       <div class="num">303</div>
       <div>销售额</div>
     </div>
     <div class="stat-card">
       <div class="num">403</div>
       <div>访问</div>
     </div>
     <div class="stat-card">
       <div class="num">503</div>
       <div>反馈</div>
     </div>
     <div class="stat-card">
       <div class="num">603</div>
       <div>配置</div>
     </div>
   </div>
   <!-- 中间内容：左侧（饼图+折线） + 右侧（柱状+雷达） -->
   <div class="middle-content">
     <!-- 左侧模块 -->
     <div class="left-panel">
       <!-- 用户访问来源（饼图） -->
       <div class="chart-box" id="pieChart">
         <div class="echarts-dom"></div>
       </div>
       <!-- 各店全年销售额（折线面积图） -->
       <div class="chart-box" id="lineChart">
         <div class="echarts-dom"></div>
       </div>
     </div>
     <!-- 右侧模块 -->
     <div class="right-panel">
       <!-- 体检预约统计（柱状图） -->
       <div class="chart-box" id="barChart">
         <div class="echarts-dom"></div>
       </div>
       <!-- 体检项统计（雷达图） -->
       <div class="chart-box" id="radarChart">
         <div class="echarts-dom"></div>
       </div>
     </div>
   </div>
 </div>
 
 <script>
   // 页面跳转函数
   function goToPage(pageUrl) {
     window.location.href = pageUrl;
   }

   // 1. 初始化「用户访问来源」饼图
   var pieDom = document.getElementById('pieChart').querySelector('.echarts-dom');
   var pieChart = echarts.init(pieDom);
   var pieOption = {
     title: { text: '用户访问来源' },
     series: [
       {
         type: 'pie',
         radius: ['40%', '70%'],
         data: [
           { value: 120, name: '微信广告' },
           { value: 80, name: '搜索引擎' },
           { value: 60, name: '直接访问' },
           { value: 40, name: '口碑推荐' },
           { value: 20, name: '其他' }
         ],
         label: { show: true, position: 'outside' }
       }
     ]
   };
   pieChart.setOption(pieOption);
 
   // 2. 初始化「各店全年销售额」折线面积图
   var lineDom = document.getElementById('lineChart').querySelector('.echarts-dom');
   var lineChart = echarts.init(lineDom);
   var lineOption = {
     title: { text: '各店全年销售额' },
     xAxis: { type: 'category', data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] },
     yAxis: { type: 'value', max: 1500 },
     series: [
       {
         name: '浑南店',
         type: 'line',
         stack: '销售额',
         data: [300, 400, 600, 800, 900, 1200, 1300, 1200, 1000, 900, 700, 600],
         areaStyle: {}, // 开启面积填充
         color: '#ff7f50'
       },
       {
         name: '市府广场店',
         type: 'line',
         stack: '销售额',
         data: [200, 300, 400, 500, 600, 800, 900, 800, 700, 600, 500, 400],
         areaStyle: {},
         color: '#40e0d0'
       },
       {
         name: '三好店',
         type: 'line',
         stack: '销售额',
         data: [100, 200, 300, 400, 500, 600, 700, 600, 500, 400, 300, 200],
         areaStyle: {},
         color: '#9370db'
       },
       {
         name: '沈北店',
         type: 'line',
         stack: '销售额',
         data: [150, 250, 350, 450, 550, 750, 850, 750, 650, 550, 450, 350],
         areaStyle: {},
         color: '#ffd700'
       },
       {
         name: '沈河店',
         type: 'line',
         stack: '销售额',
         data: [80, 180, 280, 380, 480, 680, 780, 680, 580, 480, 380, 280],
         areaStyle: {},
         color: '#00bfff'
       }
     ]
   };
   lineChart.setOption(lineOption);
 
   // 3. 初始化「体检预约统计」柱状图
   var barDom = document.getElementById('barChart').querySelector('.echarts-dom');
   var barChart = echarts.init(barDom);
   var barOption = {
     title: { text: '体检预约统计' },
     xAxis: {
       type: 'category',
       data: ['20-30','31-40','41-50','51-60','61-70']
     },
     yAxis: { type: 'value' },
     series: [
       {
         name: '预约人数',
         type: 'bar',
         data: [120, 200, 280, 180, 100],
         color: '#2f4050',
         label: { show: true, position: 'top' }
       }
     ]
   };
   barChart.setOption(barOption);
 
   // 4. 初始化「体检项统计」雷达图
   var radarDom = document.getElementById('radarChart').querySelector('.echarts-dom');
   var radarChart = echarts.init(radarDom);
   var radarOption = {
     title: { text: '体检项统计' },
     radar: {
       indicator: [
         { name: '基础项', max: 400 },
         { name: '血常规', max: 400 },
         { name: '心电图', max: 400 },
         { name: '肺功能', max: 400 },
         { name: '甲状腺项', max: 400 }
       ]
     },
     series: [
       {
         type: 'radar',
         data: [
           {
             value: [300, 350, 280, 320, 250],
             name: '项目分布'
           }
         ]
       }
     ]
   };
   radarChart.setOption(radarOption);
   
   // 退出登录功能
   document.getElementById('logoutLink').addEventListener('click', function() {
     if(confirm('确定要退出登录吗？')) {
       // 这里可以添加清除登录状态的代码，例如：
       // localStorage.removeItem('token');
       // 然后跳转到管理员登录页面
       window.location.href = 'admin.html'; // 替换为你的登录页面路径
     }
   });
 
   // 窗口resize时，图表自适应
   window.addEventListener('resize', function() {
     pieChart.resize();
     lineChart.resize();
     barChart.resize();
     radarChart.resize();
   });
 </script>
</body>
</html>